<template>
    <div class="person">
      <div>计算属性demo</div>
      <div>
        <input type="text" v-model="firstName" placeholder="请输入姓"/>
      </div>
      <div>
        <input type="text" v-model.number="lastName" placeholder="请输入名"/>
      </div>
      <h1>全名：{{fullName}}</h1>
      <div>
        <input type="text" v-model.number="fullName" placeholder="请输入全名"/>
      </div>
      <button @click="printFullName">打印全名</button>
      
    </div>
</template>


<script setup lang="ts">
  import { ref,reactive,computed } from 'vue'
  defineOptions({
    name: '计算属性demo'
  })
  const firstName = ref<string>('')
  const lastName = ref<string>('')
  
  /**
   * 计算属性
   * 1.计算属性本质上也是一个响应式对象Ref,读取它的值需要通过.value
   * 2.修改计算属性，需要以对象的方式getter/setter
   * 3.不要改变其他状态、在 getter 中做异步请求或者更改 DOM！
   * 4.避免直接修改计算属性值，应该更新它所依赖的源状态以触发新的计算。
   * 
   * */ 

  //  方式一
  // const fullName = computed(()=>{
  //   return firstName.value + ' ' + lastName.value
  // })
  // 方式二
  const fullName = computed({
    get(){
      return firstName.value + ' ' + lastName.value
    },
    set(newValue:string){
      const names = newValue.split(' ')
      if(names.length === 2){
        firstName.value = names[0]
        lastName.value = names[1]
      }
    }
  })

  function printFullName(){
    console.log(fullName.value)
  }
  
  
</script>

<style scoped>
    .person{
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px gray;
    }
    button{
        margin:0 5px;
    }
</style>